<template>
    <div class="left-bar">
        <div class="title">
            <img src="/icons/icon.png" class="logo">
            <span>校务管理</span>
        </div>
        <div>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
            <button class="btn"
                name="total"
                @click="handleClick('total')"
            >
                <img src="/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    const activeName = ref('total');
    function handleClick(name: string){
        console.log(name)
    }
</script>
<style scoped lang="scss">
    .tabs{
        width: 200px;

        el-tab-pane{
            width: 100%;
            height: 80px;
        }
    }
</style>
<style scoped lang="scss">
    .left-bar {
        width: 200px;
        height: 100%;
        background-color: #fff;
        
        .title{
            width: 100%;
            height: 80px;
            background-color: #fff;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .logo{
                width: 40px;
            }
    }
</style>
